<!--
 * @Author: your name
 * @Date: 2021-09-10 00:05:42
 * @LastEditTime: 2021-09-12 16:02:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \more-money\src\components\Nav.vue
-->
<template>
    <div class="nav flex flex-justify-evenly">
        <router-link to="/money" class="item flex flex-column flex-align-center" active-class="selected">
        <Icon iconName="salecashTransfertransferDetail" />
        记账
        </router-link> 
        <router-link to="/labels" class="item flex flex-column flex-align-center" active-class="selected">
        <Icon iconName="types" />
        标签</router-link> 
        <router-link to="/statistics" class="item flex flex-column flex-align-center" active-class="selected">
        <Icon iconName="statistics" />
        统计</router-link>
    </div>
</template>

<script lang="ts">
    const importAll = (requireContext: __WebpackModuleApi.RequireContext)=>{
        requireContext.keys().forEach(requireContext);
    }
    try{
        importAll(require.context('../assets/icons',true,/\.svg$/));
        //参数分别是导入路径，配置项：是否深层遍历(deep:true)，过滤的正则条件(filter:xxx)
    }catch(error){
        console.log(error);
    }
    export default {
        name: 'Nav'
    };
</script>

<style lang="scss" scoped>
@import '../assets/scss/config.scss';
 
.nav{
    padding: 8px 0;
    box-shadow: 0 0 3px rgba(153, 153, 153, 0.3);

    >.item{
        ::v-deep .icon{
            width: 2em; height: 2em;
        }  
        &.selected{
            ::v-deep .icon{
                fill: $color-primary;
            }
        }
    }
}

</style>